<template>
  <div class="storeSortGoods-wrap">
    <div class="goods" v-for="(item,index) in goods" :key="index" @click="getDetail(item)">
      <div class="avatar"><img v-lazy="item.avatar"></div>
      <p class="title">{{ item.title }}</p>
      <p style="color: #e93b3d;"> ￥ {{ item.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoreSortGoods',
  props:{
    goods:Array
  },
  methods:{
    getDetail(e){
      this.$emit('getDetail',e)
    }
  }
}
</script>
<style lang="less" scoped>

.storeSortGoods-wrap {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: .3s;
  .goods {
    width: 100%;
    padding:0 5px;
    .avatar {
      width: 100%;
      img {
        width: 132.5px;
        height: 132.5px;
        margin: 0 auto;
        border-radius: 2px;
      }
    
    }
    p {
      margin: .25rem 0
    }
    .title {
        height: 48px;
        font-size: 14px;
        line-height: 24px;
        text-align: left;
        color: #666;
        -webkit-transition: color .2s ease;
        transition: color .2s ease;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
  }
  
}

</style>